import React, { PureComponent } from 'react';
import styles from './index.less';
import { Carousel, Icon } from 'antd';
import { sleepFunc } from '/common/utils/utils';
import keyCodes from '/common/keyCodes';
import map from 'lodash/map';

class PhotoSwiper extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 0,
    };
    this.carRef = null;
  }

  componentDidMount() {
    if (this.props.visible) {
      this.showPhoto();
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.visible && prevState.opacity === 0) {
      this.showPhoto();
    }
  }

  showPhoto() {
    this.goto(this.props.curInd);
    sleepFunc(100).then(() => {
      this.setState({ opacity: 1 });
    });
  }

  handleClose() {
    const { onClose } = this.props;

    if (true === this.props.visible) {
      this.setState({ opacity: 0 }, () => {
        sleepFunc(200).then(() => {
          onClose && onClose();
        });
      });
    }
  }

  goto(ind) {
    if (this.carRef && this.carRef.goTo) {
      this.carRef.goTo(ind);
    }
  }

  render() {
    const { photoList, visible, onClose } = this.props;
    return (
      <div className={`${styles.wrap} photo-swiper-wrap`}
           style={{ display: visible ? 'block' : 'none' }}
           onKeyUp={(e) => {
             let keyCode = e.keyCode || e.which || e.charCode;
             let shiftKey = e.shiftKey;
             let altKey = e.altKey;
             console.log('onkeyup', keyCode, shiftKey, altKey);
             if (keyCodes.esc === keyCode) {
               this.handleClose();
             }
           }}>
        <div className={`${styles.contain}`} style={{ opacity: this.state.opacity }}>
          {
            photoList ? (
              <Carousel ref={(ref) => {
                this.carRef = ref;
              }} className={styles.carousel}>
                {
                  map(photoList, (p, k) => {
                    return (
                      <div key={k} className={styles.item}>
                        <div className={styles.table} style={{ height: document.body.offsetHeight - 20 }}>
                          <div className={styles.tableCell}>
                            <Icon style={{ fontSize: '32px', opacity: (k === 0 ? 0.2 : 1) }}
                                  disabled={k === 0}
                                  type="left-circle"
                                  onClick={() => {
                                    if (k > 0) {
                                      this.goto(k - 1);
                                    }
                                  }}/>
                          </div>
                          <div className={`${styles.imgParent} ${styles.tableCell}`}>
                            <img className={styles.img} src={p.src} alt={p.name} title={p.name}/>
                          </div>
                          <div className={styles.tableCell}>
                            <Icon style={{ fontSize: '32px', opacity: (k === photoList.length - 1 ? 0.2 : 1) }}
                                  type="right-circle"
                                  onClick={() => {
                                    if (k !== photoList.length - 1) {
                                      this.goto(k + 1);
                                    }
                                  }}
                            />
                          </div>
                        </div>
                        <div className={styles.name}>{p.name}</div>
                      </div>
                    );
                  })
                }
              </Carousel>
            ) : (
              <div className={styles.empty}>
                暂无图片
              </div>
            )
          }
        </div>
        <Icon
          className={styles.close}
          onClick={() => {
            this.setState({ opacity: 0 }, () => {
              sleepFunc(200).then(() => {
                onClose && onClose();
              });
            });
          }}
          type="close-circle"/>
      </div>
    );
  }
}

PhotoSwiper.defaultProps = {
  visible: false,
  photoList: [], // Array 图片列表, 格式：[{ name: '', src:'' }, ...]
  curInd: 0,
  onClose: null,
};

export default PhotoSwiper;
